<template>
  <div class="container">
    <van-swipe-cell :before-close="beforeClose">
      <van-row :class="propClass">
        <van-col span="24" class="stock">
          <van-row>
            <van-col span="15" class="name">{{item.matrName}}</van-col>
            <van-col span="9" class="qty">{{cpQty}}</van-col>
            <van-col span="15" class="spec">{{item.matrSpec}}</van-col>
            <van-col span="9" class="sn" v-show="showStock">{{item.sn}}</van-col>
            <van-col span="15" class="lot" v-show="showStock">{{item.lot}}</van-col>
            <van-col span="9" class="rfid" v-show="showStock">{{item.rfid}}</van-col>
            <van-col span="15" v-show="showStock"><span class="exp">Exp</span>{{item.expDate | formatDate("yyyy-MM-dd")}}</van-col>
            <van-col span="9" class="price">￥ {{item.amount}}</van-col>
          </van-row>
          <van-row v-show="item.matrBaseType == 'reagent'">
            <van-col span="24">{{!item.flagStockReagent ? '非库存试剂' : '库存试剂'}}</van-col>
          </van-row>
          <slot name="footer"></slot>
        </van-col>
      </van-row>
      <template #right>
        <van-button square type="danger" text="删除" class="delete-button"/>
      </template>
    </van-swipe-cell>

  </div>
</template>
<script>
import Vue from 'vue'
import { SwipeCell } from 'vant'

Vue.use(SwipeCell)
export default {
  data() {
    return {
    }
  },
  props: {
    item: Object,
    propClass: {type: String, default: 'spd-success'}
  },
  components: {
  },
  computed: {
    showStock() {
      return this.strings.isNotBlank(this.item.sn)
    },
    cpQty() {
      if (this.item.packageQty && this.item.skuQty) {
        return this.item.packageQty + this.item.packageUnit + '(' +  this.item.skuQty +  this.item.skuUnit + ')'
      }
      return ''
    }
  },
  methods: {
    beforeClose({ position, instance }) {
      if (position == 'right') {
        this.$emit('delete', this.item)
      }
    },
  },
  mounted() {
  }
}
</script>
<style lang="scss" scoped>
  .container {
    background-color: white;
    padding: 0 5px;
    border-radius: 5px;
  }
  .stock {
    text-align: left;
    text-overflow:ellipsis; 
    white-space:nowrap;
    .name {
      font-weight: bold;
      color:#1f1f1f;
    }
    .qty {
      text-align: right;
    }
    .price {
      text-align: right;
    }
    .exp {
    font-size: 8px;
    background-color: lightgreen;
    color: white;
    padding: 2px;
    margin:5px;
    }
    .sn  {
      text-align: right;
    }
    .rfid {
      text-align: right;
    }
  }
  .delete-button {
    height: 100%;
  }

</style>
